<!--
 * @Author: master
 * @Date: 2021-11-10 13:57:33
 * @LastEditTime: 2022-04-12 13:37:09
 * @Description: 事件列表
-->
<template>
  <div class="event-list">
    <NavBar title="突发事件列表" left-text="返回" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <Icon name="plus" size="20" />
      </template>
    </NavBar>
    <div class="activity-banner" />
    <Tabs v-model="tabsActive" sticky offset-top="44">
      <Tab title="待处理" name="1">
        <ul class="wait-handle-list">
          <li @click="onViewDetails">
            <div class="card-til">
              <span>处置中</span>
              <span>报警时间：2022-03-20</span>
              <span>未反馈</span>
            </div>
            <div class="content">
              <p>中国地震台网正式测定，在某区域（北纬30.74度，东经104.46度）发生5.1级地震，震源深度21千米。</p>
            </div>
            <p class="address">
              <Icon name="location" />
              事发地
            </p>
          </li>
        </ul>
      </Tab>
      <Tab title="已反馈" name="2"><Empty description="暂无内容" /></Tab>
      <Tab title="全部" name="3"><Empty description="暂无内容" /></Tab>
    </Tabs>
    <Tabbar v-model="tabbarActive" @change="onChange">
      <TabbarItem name="1" icon="apps-o">事件列表</TabbarItem>
      <TabbarItem name="2" icon="send-gift-o">单位事件</TabbarItem>
      <TabbarItem name="3" icon="notes-o">工作安排</TabbarItem>
      <TabbarItem name="4" icon="envelop-o">通讯录</TabbarItem>
      <TabbarItem name="5" icon="user-o">我的</TabbarItem>
    </Tabbar>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Tabs, Tab, Tabbar, TabbarItem, NavBar, Icon, Empty } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
const tabsActive = ref('1');
const tabbarActive = ref('1');
/**
 * 查看详情
 */
const onViewDetails = () => {
  router.push({ name: 'eventDetails' });
};
const onChange = val => {
  tabbarActive.value = val;
};
</script>
<style lang="less" scoped>
@import './index.less';
</style>
